<!--
 * @Description: 
 * @Date: 2021-10-25 10:43:12
 * @LastEditTime: 2022-01-27 18:09:52
 * @FilePath: /vue3-element-plus/src/views/login/index.vue
 * @Author: Devin
-->
<!--
 * @Description: 
 * @Date: 2021-10-22 09:39:41
 * @LastEditTime: 2021-10-26 16:22:52
 * @FilePath: \vue3-element-plus\src\views\login\index.vue
 * @Author: Devin
-->
<template>
  <div class="login">
    <div class="login-header flex-to-between">
      <div class="login-header-left"></div>
      <div class="login-header-right">
        <button class="unit login-btn header-btn" type="button" @click="changeI18n()">
          <i class="iconfont icon-qiehuanyuyan"></i>
        </button>
      </div>
    </div>
    <div class="login-main flex-to-center">
      <form autocomplete="off">
        <div class="segment login-div">
          <div class="login-title">{{ msg }}</div>
        </div>
        <label>
          <input
            v-model="account"
            type="text"
            placeholder="Email Address"
            class="login-input"
            autocomplete="off"
          />
        </label>
        <label>
          <input type="password" placeholder="Password" class="login-input" autocomplete="off" />
        </label>
        <button class="red login-btn" type="button" @click="toLoginFun()">
          <i class="iconfont icon-denglu"></i>&nbsp; Log in
        </button>
        <div class="segment login-div">
          <button class="unit login-btn" type="button">
            <i class="iconfont icon-shouji"></i>
          </button>
          <button class="unit login-btn" type="button">
            <i class="iconfont icon-qq"></i>
          </button>
          <button class="unit login-btn" type="button">
            <i class="iconfont icon-weixin"></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
import { ccMessage } from '@/components/packages/cc-message';
import { defineComponent, reactive, toRefs } from '@vue/runtime-core';
import { useRouter } from 'vue-router';
interface VueData {
  msg: string;
  account: string;
}

export default defineComponent({
  name: 'Login',
  setup() {
    const router = useRouter();
    const state: VueData = reactive({
      msg: 'Sign up',
      account: ''
    });

    /**
     * @description: 点击登录
     * @param {*}
     * @return {*} void
     * @default
     */
    const toLoginFun = (): void => {
      ccMessage.success('登录成功！');
      router.push({ name: 'HomeIndex' });
    };

    /**
     * @description 切换语言
     * @param {*}
     * @return {*}
     * @default
     */
    const changeI18n = (): void => {
      ccMessage.success('登录成功！');
      router.push({ name: 'HomeIndex' });
    };

    return {
      ...toRefs(state),
      toLoginFun,
      changeI18n
    };
  }
});
</script>

<style scoped lang="scss">
$ruler: 16px;
$color-red: #ae1100;
$color-bg: #ebecf0;
$color-shadow: #babecc;
$color-white: #fff;
.icon-qiehuanyuyan {
  font-size: 18px;
  color: #61677c;
  transition: all 1s;
}
.header-btn:hover {
  .icon-qiehuanyuyan {
    transform: rotate(180deg);
  }
}

.login {
  @function makelongrightshadow($color) {
    $val: 0px 0px $color;
    @for $i from 1 through 5 {
      $color: fade-out(desaturate($color, 1%), 0.02);
      $val: #{$val}, #{$i}px #{$i}px #{$color};
    }
    @return $val;
  }
  &-title {
    text-align: center;
    font-size: 40px;
    color: white;
    text-shadow: makelongrightshadow($color-shadow);
  }
}
.login {
  height: 100%;
  width: 100%;
  background-color: rgba(209,222,249,0.59);
  .login-div {
    color: $color-shadow;
    text-shadow: 1px 1px 1px $color-white;
  }

  form {
    width: 320px;
    margin: 0 auto;
  }

  .segment {
    padding: 32px;
    text-align: center;
  }

  .login-btn,
  .login-input {
    border: 0;
    // text-security:disc;
    outline: 0;
    font-size: $ruler;
    border-radius: $ruler * 20;
    padding: $ruler;
    background-color: $color-bg;
    text-shadow: 1px 1px 0 $color-white;
  }

  label {
    display: block;
    margin-bottom: $ruler * 1.5;
    width: 100%;
  }

  .login-input {
    margin-right: 8;
    box-shadow: inset 2px 2px 5px $color-shadow, inset -5px -5px 10px $color-white;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    appearance: none;
    -webkit-appearance: none;

    &:focus {
      box-shadow: inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white;
    }
  }

  button {
    color: #61677c;
    font-weight: bold;
    box-shadow:  5px 5px 5px $color-shadow;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    font-weight: 600;

    &:hover {
      box-shadow: -2px -2px 5px $color-white, 2px 2px 5px $color-shadow;
    }

    &:active {
      box-shadow: inset 1px 1px 2px $color-shadow, inset -1px -1px 2px $color-white;
    }

    .icon {
      margin-right: 8px;
    }

    &.unit {
      border-radius: 8px;
      line-height: 0;
      width: $ruler * 3;
      height: $ruler * 3;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      margin: 0px;
      font-size: $ruler * 1.2;
      &:not(:last-child) {
        margin-right: 20px;
      }
      .icon {
        margin-right: 0;
      }
    }

    &.red {
      display: block;
      width: 100%;
      color: #42b983;
    }
  }

  .input-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    label {
      margin: 0;
      flex: 1;
    }
  }
  .login-header {
    height: 66px;
    padding: 0 40px;
  }
  .login-main {
    height: calc(100% - 66px);
  }
}
</style>
